<template>
<div>
  <div class="table-data" v-show="tabShow">
    <div class="search-box">
      <!-- v-if="manage!='shop' && manage!='channel'" -->
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
      <el-input size="small" v-model="searchMap.order_sn" placeholder="订单编号"></el-input>
      <el-select v-model="searchMap.shipping_type" clearable placeholder="商品类型">
        <el-option label="物流商品" value="ship"></el-option>
        <el-option label="核销商品" value="code"></el-option>
      </el-select>
      <!-- <el-select v-model="searchMap.vendor_id" v-if="manage=='admin'" clearable placeholder="全部供应商">
        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select> -->
      <el-select v-model="searchMap.vendor_id" v-if="manage=='admin'" clearable placeholder="全部渠道">
        <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.shop_id" v-if="manage=='admin'" clearable placeholder="全部商家">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="订单状态">
        <el-option label="已取消" value="cancelled"></el-option>
        <el-option label="下单失败" value="fail"></el-option>
        <el-option label="待取消" value="wait_cancel"></el-option>
        <el-option label="已下单" value="created"></el-option>
        <el-option label="已支付" value="payed"></el-option>
        <el-option label="已发货" value="sent"></el-option>
        <el-option label="已签收" value="confirm"></el-option>
        <el-option label="退款中" value="refund"></el-option>
        <el-option label="退货中" value="sentback"></el-option>
        <el-option label="换货中" value="exchange"></el-option>
        <el-option label="完成" value="completed"></el-option>
        <el-option label="已删除" value="deleted"></el-option>
        <el-option label="退款完成" value="refund_complete "></el-option>
        <el-option label="已使用" value="used"></el-option>
        <el-option label="待使用" value="wait_used"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">批量发货</el-button> -->
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">导出excel</el-button>
    </div>
    <div ref="tableBox" style="overflow:scroll"  
        v-loading="loading"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading">
      <div class="order-box" v-for="(items,index) in tableData" :key="index">
        <div class="order-top">
          <span>订单号：{{items.order_sn}}</span>
          <span>物流：{{orderInfo[index]}}</span>
          <span>api渠道：{{items.merchant.name}}</span>
          <span>支付方式:{{items.pay_type_txt}}</span>
        </div>
        <el-table :span-method="arraySpanMethod" :data="tableData[index].order_item"  style="width:100%" class="table-box">
          <el-table-column label="商品名称" width="300">

            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.cover" style="max-width: 300px; max-height: 300px;"/>
              <img slot="reference" class="commodity-image" :src="scope.row.cover" :alt="scope.row.cover">
			   </el-popover>
              <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.goods_name}}</p>
              </div>
            </template>
            
        </el-table-column>
          <el-table-column label="规格" prop="spec_item"></el-table-column>
          <el-table-column label="总价/数量" width="120">
            <template slot-scope="scope">
              {{scope.row.sub_total}}/{{scope.row.num}}
            </template>
          </el-table-column>
          <el-table-column label="买家信息" width="170" prop="lastLoginTime">{{items.user ? items.user.uc_username : '/'}} ：{{items.user ? items.user.uc_mobile : '/'}}</el-table-column>
          <el-table-column label="收货信息" prop="address_full">{{items.address_full}}</el-table-column>
          <el-table-column label="状态" width="80">
            {{items.status_txt}} 
          </el-table-column>
          <el-table-column label="交易时间" prop="dayTime">
            <p>下单 {{items.create_time}}</p>
            <p>支付 {{items.pay_time}}</p>
          </el-table-column>
          <el-table-column label="第三方操作" v-if="items.extension!==null">
            <div v-if="items.extension.outer_status!==null" style="text-align: left;">
              <p style="color:red;" v-if="items.extension.outer_status=='wait_vendor'&&items.extension!==null">等待供应商审核</p>
              <p v-if="items.extension.outer_status=='fail'&&items.extension!==null">下单失败 :<span style="color:red;">{{items.extension.order_error_remark}}</span></p>
              <p v-if="items.extension.outer_status=='cancelled'&&items.extension!==null">订单取消 :<span style="color:red;">{{items.extension.order_error_remark}}</span></p>
              <p v-if="items.extension.outer_status=='cancel_refuse'&&items.extension!==null">订单拒绝取消 :<span style="color:red;">{{items.extension.order_error_remark}}</span></p>
              <p v-if="items.extension.outer_status=='success'&&items.extension!==null">下单成功（第三方订单号） :<span style="color:red;">{{items.extension.out_order_sn}}</span></p>
              <div v-if="items.extension.outer_status=='sent'&&items.extension!==null">已发货 :
                <p>第三方物流单号:<span style="color:red;">{{items.extension.shipping_no}}</span></p>
                <p>物流公司:<span style="color:red;">{{items.extension.shipping_company}}</span></p>
              </div>
              <p v-if="items.extension.outer_status=='confirm'&&items.extension!==null">已确认收货</p>
              <el-button size="mini" type="primary" v-if="items.extension.outer_status=='wait'&&items.extension!==null" @click="orderpush(items.id)">订单推送</el-button>
              <el-button size="mini" v-if="items.extension!==null && items.extension.is_push && (items.extension.outer_status=='wait_vendor' || items.extension.outer_status=='success')" type="primary" @click="cancellationoforder(items.id)">取消订单</el-button>
            </div>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <router-link v-if="manage!='shop'" :to="{name:'orderDetail',query:{id:items.id}}" @click.native="handleDetail()" class="user-detail el-button el-button--primary el-button--mini">详情</router-link>
              <el-button size="mini" v-if="items.status=='payed' && manage!='channel'" type="primary" @click.native="handleAdd(index,items)">发货</el-button>
              
              <el-button size="mini" v-if="items.status=='refund'&& manage!='channel'" type="danger" @click="cancellationofrefund(scope.row)">取消退款</el-button>
              <el-button size="mini" v-if="items.status=='sent'  && manage!='channel'" type="primary" @click="LogisticsorderNo(items.order_sn,orderInfo[index])">物流单号</el-button>
              
            </template>
          </el-table-column>
        </el-table>
        <div class="order-bot">
          <p><span>{{items.order_item.length}} </span>件商品 总价<span> {{items.total}} </span>包含邮费{{items.shipping_fee}}</p>
        </div>
      </div>
    </div>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
  <router-view @loadData="loadData"></router-view>
  <EditDialog :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" :key="timer" @loadData="loadData"></EditDialog>
</div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import businessApi from "@/api/business";
import supplierApi from "@/api/supplier";
// import { State, Getter, Mutation, Action } from "vuex-class";
import orderApi from "@/api/order";
import bus from "@/api/busEvevt"
import channelApi from "@/api/channel";
import { Container } from 'element-ui';
@Component({
  components: {EditDialog }
})
export default class orderList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() Height:any=''
  @Provide() tableData: any = []; // 表格数据
  @Provide() newTableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() supplierList: any=[];//供应商列表
  @Provide() channelList: any=[];//渠道列表
  @Provide() businessList: any=[];//商家列表
  @Provide() state: boolean = true; // 黑白名单状态
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() orderInfo: any = []; 
  @Provide() timer: any = '';
  @Provide() searchMap:{
    keyword: string,
    order_sn: string,
    shipping_type:string,
    vendor_id:any,
    shop_id:any,
    status:string,
  }={
    keyword: "",
    order_sn: "",
    shipping_type:"",
    vendor_id:"",
    shop_id:"",
    status:"" ,
  }
  @Provide() searchMapC:{
    type: any,
    name:any,
  }={
    type: '',
    name:''
  }
  @Provide() searchMapS:{//供应商查询条件
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() formData:any={
    id:"",
    shipping_company:"",
    shipping_no:""
  }
  @Provide() manage: any = '';//管理员
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/orderList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Watch("Height")
  changeHeight(){
    (this.$refs.tableBox as HTMLDivElement).style.maxHeight=this.Height + 10+ 'px'
  }
  handleDetail(){
    this.tabShow=false
  }
  // 发货
  handleAdd(index,data){
    this.formData.id=data.id
    this.isAdd=true;
    
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
  }
  created() {
    if(this.$route.query.vendor_id!=undefined) {
      this.searchMap.vendor_id = this.$route.query.vendor_id
    }
    this.Height=document.body.offsetHeight - 323
    this.loadData();
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    if(this.$route.path!='/orderList'){
      this.tabShow=false
    }
    if(this.manage=='admin'){
      // 商家
      businessApi.businessList(1,999999,this.searchMapB)
        .then((res: any) => {
          this.businessList = res.data.data.list;
      });
      // 供应商
      supplierApi.supplierList(1,999999,this.searchMapS)
        .then((res: any) => {
          this.supplierList = res.data.data.lists.data;
      });
      // 供应商
      channelApi.channelList(1,999999,this.searchMapC)
      .then((res: any) => {
          this.channelList = res.data.data.list;
      })
    }
  }
  mounted(){
    //接收兄弟传值
    bus.$on('vendorId',(msg) => {
      this.searchMap.vendor_id = msg
    })
  }
  loadData() {
    setTimeout(() => {
      orderApi.orderList(this.page,this.size,this.searchMap)
      .then((res: any) => { 
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        if(this.tableData){
          res.data.data.list.forEach((items:any)=>{
            items.order_item.forEach((item:any)=>{
              item.count=items.order_item.length
            });
            this.orderInfo.push(items.extension ? items.extension.shipping_company : []);
            this.loading=false
          })
        };
      });
    }, 500);
  }
  arraySpanMethod({row, column, rowIndex, columnIndex }) {
    if (columnIndex === 4 || columnIndex === 5|| columnIndex === 6 || columnIndex === 7) {
        for (let index in this.tableData) {
          if (this.tableData[index].id == row.order_id) {
             return [this.tableData[index].order_item.length, 1];
          }
        }
    }
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
  //取消退款
  cancellationofrefund(msg:any) {
    this.$prompt('请输入拒绝退款原因', '取消退款', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then((list:any) => {
      let value = list.value
      let data = {
        id : msg.id,
        status: 1,
        reason: value,
        refund_amount:0
      }
      if(value==null) {
        data.reason = ''
      }
      orderApi.examineOrder(data)
        .then(res=>{
          if(res.data.status){
          this.$message({
          message: '操作成功',
          type: "success"
          });
          this.$emit("closeDialog");
          this.$emit("loadData")
        }else{
            this.$message({
            message: res.data.msg,
            type: "error"
            });
        }
      })
    })
  }
  //物流单号
  LogisticsorderNo(ordernum,logistics) {
     const h = this.$createElement;
        this.$msgbox({
          title: '物流信息',
          message: h('div', [
            h('p', '物流公司： ' + logistics),
            h('p', '快递单号  :  ' + ordernum )
          ]),
          showCancelButton: false,
          confirmButtonText: '确定',
          beforeClose: (action, instance, done) => {
            done();
          }
        })
  }
  //推送订单
  orderpush(msg:any) {
    let data = {
      id:msg
    }
    orderApi.pushordertosupplier(data)
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
  }
  //取消订单
  cancellationoforder(id:any) {
    let data= {
      id: id
    }
    orderApi.cancelsupplierorder(data)
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-left: 10px;
}
.el-button+.el-button {
    margin: 5px;
}
.order-bot,.order-top{
  background: rgba(242, 242, 242, 0.99);
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.order-top{
  span{
    margin-right: 30px;
  }
}
.order-bot{
  span{
    color: red;
  }
}
.el-table .cell {
  text-align: center ;
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
</style>
